CSS Container Query Type'ı Anlamak: Duyarlı Tasarım için Container Query Sınıflandırması

Duyarlı web tasarımı yıllar içinde önemli ölçüde gelişti. Başlangıçta, web sitelerimizi farklı ekran boyutlarına uyarlamak için büyük ölçüde medya sorgularına güvendik. Ancak, web uygulamaları daha karmaşık hale geldikçe, medya sorgularının sınırlamaları belirginleşti. CSS spesifikasyonuna güçlü bir ek olan CSS Container Query'leri devreye girdi ve geliştiricilerin öğeleri görüntü alanı yerine içeren öğenin boyutuna veya durumuna göre stillendirmesine olanak tanıdı. Bu, çok daha fazla esneklik ve bileşen düzeyinde duyarlılık sağlar.

Container Query'leri Nedir?

Özünde, Container Query'leri, bir üst kapsayıcının boyutuna veya stiline göre CSS stilleri uygulamanıza olanak tanır. Bir kenar çubuğunda veya ana içerik alanında bulunan alana göre düzenini uyarlaması gereken bir kart bileşeniniz olduğunu hayal edin. Container Query'leri, karmaşık JavaScript çözümlerine başvurmak zorunda kalmadan bunu mümkün kılar.

İki ana container query türü vardır:

• Boyut Container Query'leri: Bunlar, kapsayıcının boyutlarını (genişlik ve yükseklik) sorgular.
• Durum Container Query'leri: Bunlar, kapsayıcının stilini veya durumunu sorgular.

Bu blog gönderisi, Boyut Container Query'lerinin temel bir yönü olan Container Query Sınıflandırmasına odaklanacaktır.

Container Query Sınıflandırması: Temel Bilgileri Anlamak

Container Query Sınıflandırması, belirli boyut özelliklerini adlandırılmış container türleri olarak tanımlayarak boyuta dayalı container query'lerini kolaylaştırmamıza yardımcı olur. Aynı `min-width` ve `max-width` koşullarını tekrar tekrar yazmak yerine, yeniden kullanılabilir container türleri oluşturabiliriz. Bu, daha temiz, daha sürdürülebilir ve daha okunabilir koda yol açar.

`@container` kuralı, container query'lerini tanımlamak ve uygulamak için kullanılır. Temel sözdizimi, bir container adı, bir container türü ve container belirtilen koşullarla eşleştiğinde uygulanması gereken stilleri belirtmeyi içerir.

Container Query Sınıflandırmasının Temel Bileşenleri

• Container Adı: `container-name` CSS özelliği kullanılarak bir container öğesine verdiğiniz bir ad. Bu ad, `@container` kuralında container'ı hedeflemek için kullanılır. Bir tanımlayıcı görevi görür.
• Container Türü: Container türünü belirtir. Bu, tarayıcıya sorgu için hangi boyutların kullanılacağını ve çevrelemenin nasıl oluşturulacağını söyler. Ortak değerler `size`, `inline-size`, `block-size` ve `normal`dır.
• Container Query Koşulları: Bunlar, `@container` kuralındaki stillerin uygulanması için karşılanması gereken koşullardır. Bu koşullar genellikle kapsayıcının boyutlarını kontrol etmeyi içerir.
• Stiller: Container query koşulları karşılandığında uygulanan CSS kuralları.

Daha Derine İnmek: Container Türleri ve Bunların Etkileri

`container-type` özelliği, çevrelemeyi oluşturmak ve kapsayıcının hangi eksenler boyunca sorgulanacağını tanımlamak için çok önemlidir. Alabileceği farklı değerleri keşfedelim:

• `size`: Bu değer, hem satır içi hem de blok eksenleri boyunca boyut çevrelemesi oluşturur. Bu, container'ın genişliğinin ve yüksekliğinin sorgu için kullanılacağı anlamına gelir. Bu, genellikle genel amaçlı container query'leri için en uygun seçimdir.
• `inline-size`: Bu, yalnızca satır içi ekseni (genellikle genişlik) boyunca boyut çevrelemesi oluşturur. Bu, yalnızca container'ın genişliğindeki değişikliklere tepki vermeniz gerektiğinde kullanışlıdır.
• `block-size`: Bu, yalnızca blok ekseni (genellikle yükseklik) boyunca boyut çevrelemesi oluşturur. Bu, yalnızca container'ın yüksekliğindeki değişikliklere tepki vermeniz gerektiğinde kullanışlıdır.
• `normal`: Bu, varsayılan değerdir. Çevreleme oluşturmaz, yani container query'leri öğeye uygulanmaz.

Container Query Sınıflandırmasının Pratik Örnekleri

Container Query Sınıflandırmasının bazı pratik örneklerle nasıl çalıştığını gösterelim.

Örnek 1: Uyarlanabilir Düzenli Bir Kart Bileşeni

İçeriğini genişliğine göre farklı şekilde görüntülemesi gereken bir kart bileşeni hayal edin. Kart dar olduğunda, resmi ve metni dikey olarak yığmak istiyoruz. Kart daha geniş olduğunda, bunları yan yana görüntülemek istiyoruz.

HTML:

            <div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image">
    <div class="card-content">
      <h3>Card Title</h3>
      <p>Card description goes here.</p>
    </div>
  </div>
</div>
            

              
                Copy
              
            
          

CSS:

            .card-container {
  container-name: card;
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.card img {
  width: 100%;
  margin-bottom: 10px;
}

@container card (min-width: 300px) {
  .card {
    flex-direction: row;
  }

  .card img {
    width: 150px;
    margin-right: 10px;
    margin-bottom: 0;
  }
}

            

              
                Copy
              
            
          

Açıklama:

• `card-container` öğesinde `container-name: card` ve `container-type: inline-size` ayarladık. Bu, onu satır içi boyutundaki (genişlik) değişikliklere yanıt veren "card" adlı bir container yapar.
• `@container card (min-width: 300px)` kuralı, yalnızca container'ın genişliği en az 300 piksel olduğunda stilleri uygular.
• `@container` kuralının içinde, kartın `flex-direction` özelliğini `row` olarak değiştirerek resmi ve metni yan yana görüntülüyoruz.

Örnek 2: Uyarlanabilir Gezinme Çubuğu

Kullanılabilir genişliğe göre farklı şekilde görüntülenmesi gereken bir gezinme çubuğu düşünün. Alan sınırlı olduğunda, bir hamburger menüsünde daralır.

HTML:

            <nav class="nav-container">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="hamburger-menu">≡</button>
</nav>
            

              
                Copy
              
            
          

CSS:

            .nav-container {
  container-name: nav;
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin-right: 20px;
}

.hamburger-menu {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

@container nav (max-width: 500px) {
  .nav-list {
    display: none;
  }

  .hamburger-menu {
    display: block;
  }
}

            

              
                Copy
              
            
          

Açıklama:

• `nav-container` öğesinde `container-name: nav` ve `container-type: inline-size` ayarladık.
• `@container nav (max-width: 500px)` kuralı, container'ın genişliği 500 piksel veya daha az olduğunda stilleri uygular.
• `@container` kuralının içinde, gezinme listesini gizler ve hamburger menüsünü görüntüleriz.

Gelişmiş Container Query Teknikleri

Container Query Birimlerini Kullanma

Container Query Birimleri (`cqw`, `cqh`, `cqi`, `cqb`), container'ın boyutuna dayalı göreli birimlerdir. Container'ın boyutlarına uyum sağlayan akışkan düzenler oluşturmanın güçlü bir yolunu sağlarlar. Bunlar, görüntü alanı birimlerine (vw, vh) benzer, ancak görüntü alanı yerine container'ın boyutuna göredir.

• `cqw`: container'ın genişliğinin %1'i.
• `cqh`: container'ın yüksekliğinin %1'i.
• `cqi`: container'ın satır içi boyutunun %1'i (yatay yazı modunda genişlik).
• `cqb`: container'ın blok boyutunun %1'i (yatay yazı modunda yükseklik).

Örnek:

            .element {
  font-size: 2cqw;
  padding: 1cqb;
}

            

              
                Copy
              
            
          

Bu örnekte, yazı tipi boyutu container'ın genişliğinin %2'si ve dolgu container'ın yüksekliğinin %1'i olacaktır.

Container Query'lerini Medya Query'leri ile Birleştirme

Container Query'leri ve Medya Query'leri, daha da karmaşık duyarlı tasarımlar oluşturmak için birlikte kullanılabilir. Örneğin, sayfanın genel düzenini kontrol etmek için Medya Query'lerini ve bu düzen içindeki tek tek bileşenleri uyarlamak için Container Query'lerini kullanabilirsiniz. Bu kombinasyon, hem genel hem de yerel duyarlılığa olanak tanır.

Shadow DOM ile Çalışma

Container query'leri, Shadow DOM içinde iyi çalışır ve container'ın boyutuna duyarlı, kapsüllenmiş, yeniden kullanılabilir bileşenler oluşturmanıza olanak tanır. Bu, özellikle bileşen tabanlı mimariye büyük ölçüde dayanan karmaşık web uygulamaları için kullanışlıdır.

Container Query'lerini Kullanmak için En İyi Uygulamalar

• Mobil Öncelikli Yaklaşımla Başlayın: Bileşenlerinizi önce en küçük container boyutu için tasarlayın ve ardından container büyüdükçe aşamalı olarak geliştirin.
• Anlamlı Container Adları Kullanın: Container'ın amacını yansıtan açıklayıcı container adları seçin. Bu, kodunuzu daha okunabilir ve sürdürülebilir hale getirecektir.
• Aşırı Karmaşık Query'lerden Kaçının: Container query koşullarınızı olabildiğince basit tutun. Aşırı karmaşık query'ler, kodunuzu anlamayı ve hata ayıklamayı zorlaştırabilir.
• Kapsamlı Bir Şekilde Test Edin: Duyarlı olduklarından ve doğru şekilde uyum sağladıklarından emin olmak için bileşenlerinizi çeşitli container boyutlarında test edin. Farklı container boyutlarını simüle etmek için tarayıcı geliştirici araçlarını kullanın.
• Performansı Göz önünde bulundurun: Container query'leri önemli avantajlar sunarken, performansa dikkat etmek önemlidir. Container query'lerinizde aşırı karmaşık stillerden kaçının, çünkü bu, oluşturma performansını etkileyebilir. Gerektiği gibi kıyaslama ve optimize edin.
• Bileşenlerinizi belgeleyin: Container query'leri bileşen tasarımına bir karmaşıklık katmanı eklediğinden, kolay gelecekteki bakım için farklı container boyutlarında beklenen davranışı belgelediğinizden emin olun.

Container Query'leri için Tarayıcı Desteği

Container Query'leri için tarayıcı desteği hızla artıyor. Chrome, Firefox, Safari ve Edge dahil olmak üzere çoğu modern tarayıcı artık Container Query'lerini destekliyor. Hedef kitlenizin Container Query'lerinin avantajlarını deneyimleyebildiğinden emin olmak için "Can I use" gibi web sitelerindeki en son tarayıcı uyumluluk bilgilerini her zaman kontrol edin.

Daha eski tarayıcıları desteklemeniz gerekiyorsa, uyumluluk sağlamak için polyfill'ler kullanabilirsiniz. Ancak, polyfill'lerin ek yük getirebileceğini ve yerel Container Query'lerinin davranışını tam olarak kopyalamayabileceğini unutmayın.

Container Query'leri ile Duyarlı Tasarımın Geleceği

Container Query'leri, duyarlı web tasarımında önemli bir adımı temsil ediyor. Geliştiricilere daha esnek, sürdürülebilir ve bileşen odaklı web siteleri oluşturma gücü veriyorlar. Tarayıcı desteği gelişmeye devam ettikçe, Container Query'leri modern web uygulamaları oluşturmak için giderek daha önemli bir araç haline gelecektir.

Uygulama için Küresel Hususlar

Küresel bir kitle için container query'leri uygularken, şu noktalara dikkat edin:

• Yerelleştirme ve Uluslararasılaştırma (l10n ve i18n): Metin uzunluğu diller arasında önemli ölçüde değişir. Container query'leri, öğelerin container'lar içindeki farklı metin boyutlarına uyum sağlamasını sağlayarak taşmaları ve düzen bozulmalarını önler.
• Sağdan Sola (RTL) Dilleri: Container query'leri, RTL düzenlerini otomatik olarak işler. Örneğin, kart bileşeninizin Arapça veya İbranice için resim ve metin konumlarını değiştirmesi gerekiyorsa, container query'leri buna göre ayarlanacaktır. Tam RTL desteği için mantıksal özellikler (örneğin, `margin-inline-start`) kullanmanız gerekebilir.
• Kültürel Tasarım Tercihleri: Temel mantık aynı kalsa da, kültürel tasarım tercihlerine dikkat edin. Farklı düzenlerin ve görsel öğelerin farklı kültürlerde nasıl algılanabileceğini düşünün. Bazı bölgelerde minimalist bir tasarım tercih edilebilirken, diğerlerinde daha görsel açıdan zengin bir tasarım tercih edilebilir.
• Erişilebilirlik: Container query'leri kullanımınızın erişilebilirliği olumsuz etkilemediğinden emin olun. Örneğin, metnin okunabilir kaldığından ve etkileşimli öğelerin tüm container boyutlarında kolayca erişilebilir olduğundan emin olun.

Sonuç

Container Query Sınıflandırması, duyarlı web tasarımlarınızın esnekliğini ve sürdürülebilirliğini büyük ölçüde artırabilecek güçlü bir araçtır. Farklı container türlerini ve bunları nasıl etkili bir şekilde kullanacağınızı anlayarak, çevrelerine sorunsuz bir şekilde uyum sağlayan, çok çeşitli cihazlarda ve ekran boyutlarında daha iyi bir kullanıcı deneyimi sağlayan bileşenler oluşturabilirsiniz. Container query'lerini benimseyin ve web düzenleriniz üzerinde yeni bir kontrol düzeyi açın!